import { useAppSelector } from '@/store/hooks'
import { UserTreasury } from '@/store/treasurySlice'
import classNames from 'classnames'
import { TreasuryRoleColor, TreasuryRoleName } from '@/constants'
import { Text, View } from '@tarojs/components'
import { Avatar, Card } from '@/ui-components'
import Taro from '@tarojs/taro'
import { TreasuryCheckin, TreasuryUserCard, TreasuryUserItem } from './components'
import './index.scss'
import { useEffect, useState } from 'react'
import { UserTreasuryCheckin } from '@/types'
import { checkinTreasury, getTreasuryCheckinDetail } from '@/network/treasury'
import to from 'await-to-js'



interface TreasuryUserItemProps {
  userTreasury: UserTreasury
  userCheckin: UserTreasuryCheckin
  onCheckin: () => {}
}

const UserInfoCard = (({userTreasury, userCheckin, onCheckin}: TreasuryUserItemProps) => {
  return (
    <Card padding className='row-between-center'>
      <Avatar
        avatar={userTreasury.userAvatar}
        gender={userTreasury.userGender}
      />
      <View className='flex-1 ml-medium'>
        <View className='text-title'>{userTreasury.username}</View>
        <View className={classNames(TreasuryRoleColor[userTreasury.treasuryRole], 'text-primary mt-small')}>{TreasuryRoleName[userTreasury.treasuryRole]}</View>
        <View className='text-normal mt-small'>宝库积分：<Text className='success'>{userTreasury.treasuryTotalScore}</Text></View>
      </View>
      <TreasuryCheckin
        userTreasury={userTreasury}
        userCheckin={userCheckin}
        onCheckin={onCheckin}
      />
    </Card>
  )
})

const MemberCard = () => {
  const treasuryId = useAppSelector(state => state.treasury.userTreasury.treasuryId)
  return (
    <TreasuryUserCard>
      <TreasuryUserItem
        image='/common/user/checkin-record.png'
        text='签到记录'
        className='mt-normal at-col-4'
        onClick={() => Taro.navigateTo({url: `/subpages/treasury/checkin/record/index?treasuryId=${treasuryId}`})}
      />
      <TreasuryUserItem
        image='/common/user/checkin-rank.png'
        text='签到排行'
        className='mt-normal at-col-4'
      />
      <TreasuryUserItem
        image='/common/user/user-update.png'
        text='信息更新'
        className='mt-normal at-col-4'
      />
      <TreasuryUserItem
        image='/common/user/score-record.png'
        text='积分记录'
        className='mt-normal at-col-4'
      />
      <TreasuryUserItem
        image='/common/user/score-rank.png'
        text='积分排行'
        className='mt-normal at-col-4'
      />
      <TreasuryUserItem
        image='/common/user/treasury-exit.png'
        text='退出宝库'
        className='mt-normal at-col-4'
        textClassName='warning'
      />
    </TreasuryUserCard>
  )
}

const AdminCard = () => {
  return (
    <TreasuryUserCard>
      <TreasuryUserItem
        image='/common/user/task-approval.png'
        text='任务批准'
        className='mt-normal at-col-3'
      />
      <TreasuryUserItem
        image='/common/user/task-archive.png'
        text='任务存档'
        className='mt-normal at-col-3'
      />
      <TreasuryUserItem
        image='/common/user/lottery-archive.png'
        text='抽奖存档'
        className='mt-normal at-col-3'
      />
      <TreasuryUserItem
        image='/common/user/user-approval.png'
        text='成员审核'
        className='mt-normal at-col-3'
      />
    </TreasuryUserCard>
  )
}

const OwnerCard = () => {
  const treasuryId = useAppSelector(state => state.treasury.userTreasury.treasuryId)
  return (
    <TreasuryUserCard>
      <TreasuryUserItem
        image='/common/user/checkin-setting.png'
        text='签到设置'
        className='mt-normal at-col-3'
        onClick={() => Taro.navigateTo({url: `/subpages/treasury/checkin/create/index?treasuryId=${treasuryId}`})}
      />
      <TreasuryUserItem
        image='/common/user/checkin-setting.png'
        text='商城排序'
        className='mt-normal at-col-3'
      />
      <TreasuryUserItem
        image='/common/user/charge-service.png'
        text='手续费设置'
        className='mt-normal at-col-3'
      />
      <TreasuryUserItem
        image='/common/user/treasury-setting.png'
        text='宝库设置'
        className='mt-normal at-col-3'
      />
      <TreasuryUserItem
        image='/common/user/member-manger.png'
        text='成员管理'
        className='mt-normal at-col-3'
      />
      <TreasuryUserItem
        image='/common/user/score-water.png'
        text='积分流水'
        className='mt-normal at-col-3'
      />
      <TreasuryUserItem
        image='/common/user/exchange-archive.png'
        text='兑换存档'
        className='mt-normal at-col-3'
      />
      <TreasuryUserItem
        image='/common/user/treaseury-reset.png'
        text='重置宝库'
        className='mt-normal at-col-3'
        textClassName='warning'
      />
    </TreasuryUserCard>
  )
}

export default function TreasuryUser() {

  const userTreasury = useAppSelector(state => state.treasury.userTreasury)
  const [userCheckin, setUserCheckin] = useState<Partial<UserTreasuryCheckin>>({})

  const onCheckin = async () => {
    const treasuryId = userTreasury.treasuryId
    const [err, userCheckin] = await to(checkinTreasury(treasuryId))
    if (err) {
      Taro.showToast({title: '签到失败', icon: 'none'})
    } else {
      Taro.showToast({title: '签到成功'})
      setUserCheckin(userCheckin)
    }
  }

  useEffect(() => {
    const initUserTreasuryCheckin = async () => {
      if (userTreasury.treasuryId === undefined) return
      const [err, data] = await to(getTreasuryCheckinDetail(userTreasury.treasuryId))
      if (err) return
      setUserCheckin(data)
    }
    initUserTreasuryCheckin()
  }, [userTreasury])

  console.log('initUserTreasuryCheckin', userTreasury, userCheckin)
  return (
    <View className='treasury-user'>
      <UserInfoCard userTreasury={userTreasury} userCheckin={userCheckin} onCheckin={onCheckin} />
      <MemberCard />
      <AdminCard />
      <OwnerCard />
    </View>
  )
}
